<template>
  <el-dialog
    title="选择人员"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="80%"
    >
    <div class="person_content">
      <div class="group">
        <div class="mailList">
          <h3>通讯录</h3>
          <div class="group_con">
            <div class="title">
              <span v-for="(item,index) in headList" :key="index" @click="searchBeforLive(item.superId, index)">
                {{item.name}} 
                <span>></span>
              </span>
            </div>
            <div class="searchInput">
              <el-input v-model="staffNameOrId" placeholder="请输入姓名或者工号" size="mini" style="width: 60%"></el-input>
              <el-button type="primary" size="mini" @click="searchStaff()" >搜索</el-button>
              <el-button type="primary" size="mini" @click="RefreshList()">所有分组</el-button>
            </div>
            <div v-loading="loading" class="staff_con">
              <ul>
                <li v-for="(item1, index) in staffList" :key="'info' + index">
                  <p style="padding-left: 10px" @click="watchGroup(item1.orgId, item1.orgName, item1.relaOrgId)">
                    <i class="el-icon-arrow-down"></i>
                    {{item1.orgName}}
                  </p>
                </li>
                <!-- 人list -->
                <ul class="person_list">
                    <li v-for="(item2, index) in personList" :key="'info2-'+ index" @click="handleCheckedCitiesChange(item2.staffId, item2.staffName, item2.orgName, item2.staffAccount, item2.staffPosition, item2.orgFullName)">
                      <el-tooltip class="item" placement="bottom">
                        <div slot="content">部门：{{item2.orgName}}<br/><br/>单位：{{toplicText(item2)}}<br/><br/>工号：{{item2.staffAccount}}<br/><br/> 职位：{{item2.staffPosition ? item2.staffPosition : ''}}</div>
                        <div>
                          <span class="list_con">{{item2.staffName}}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px;color: #999;">{{toplicText(item2)}}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px;color: #999;">{{item2.orgName}}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px;color: #999;">{{item2.staffAccount}}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px;color: #999;">{{item2.staffPosition ? item2.staffPosition : ''}}</span>
                        </div>
                      </el-tooltip>
                    </li>
                </ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="personnel">
        <h3>已选人员</h3>
        <div class="person_box">
            <el-tag
              v-for="(tag,index) in upperStory"
              :key="index"
              closable
              @close="handleClose(index)"
              >
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">
                    部门：{{tag.orgName}}<br/><br/>
                    单位：{{toplicText(tag)}}<br/><br/>
                    工号：{{tag.staffAccount}}<br/><br/>
                    职位：{{tag.staffPosition ? tag.staffPosition : ''}}
                </div>
                <el-button>{{tag.staffName}}</el-button>
              </el-tooltip>
            </el-tag>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submit()" size="mini">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      inputVal: '',
      groupVal: '',
      staffList: [], // 通讯录一级
      personList: [], // 最后到人的list
      upperStory: [],
      staffIds: [], // 发送人数组id
      headList: [], // 头部返回上一层
      loading: false,
      deleteIdList: [], // 批量删除数组
      staffNameOrId: '', // 搜索id,
      sendName: ''
    }
  },
  activated () {
  },
  methods: {
    // 回显数据
    fetchAgainData (groupId) {
      if (groupId) {
        let ids = groupId.split(',')
        this.$http({
          url: this.$http.adornUrl(`staff/infos`),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(res => {
          if (res.data.code === 0) {
            this.upperStory = res.data.data
            this.$emit('fetchPersonId', this.upperStory)
          }
        })
      }
    },
    // 字典管理 人员回显
    fetchdescData (groupId) {
        this.$http({
          url: this.$http.adornUrl(`/sysdictdata/info/${groupId}`),
          method: 'post',
          data: this.$http.adornData()
        }).then(res => {
          if (res.data.code === 0) {
            this.upperStory = res.data.sysDictData.staffAccountAndNameVos
          }
        })
    },
    fetchAgainGroupData (sysDictDataId) {
      this.$http({
        url: this.$http.adornUrl('/staffsysdictdata/getStaffList'),
        method: 'get',
        params: this.$http.adornParams({
            sysDictDataId: sysDictDataId
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data)
          this.upperStory = data.list
          console.log( this.upperStory)
          // this.$emit('fetchGroupId', this.upperStory)
        }
      })
    },
    // 初始
    init (name, id, groupId) {
      console.log(name)
      this.sendName = name
      this.dialogVisible = true
      this.fetchStaffList()
      this.headList = []
      this.personList = []
      this.staffNameOrId = ''
      this.upperStory = []
      if (id && name === '选择主数据人员') {
        this.fetchAgainData(groupId)
      }
      if (name === '人员配置') {
        this.fetchAgainGroupData(groupId)
      }
      if (name === '字典管理') {
        this.fetchdescData(groupId)
      }
    },
    // 查看下面分组通讯录
    watchGroup (id, name, superId) {
      let obj = {}
      obj.name = name
      obj.superId = superId
      this.headList.push(obj)
      this.fetchTwoSatfflist(id)
    },
    // 人员提示文字
    toplicText (item) {
      let company = item.orgFullName
      let orgName = item.orgName
      if (company) {
        if (company.indexOf('中国电信股份有限公司') === 0) {
          company = company.substring(10, company.length)
        }
        let strLength = company.length - orgName.length
        company = company.substring(0, strLength)
        return company
      }else {
        return null
      }
    },
    // 删除人员标签
    handleClose (index) {
      this.upperStory.splice(index, 1)
    },
    // 搜索人员
    searchStaff () {
      this.$http({
        url: this.$http.adornUrl(`/staff/list`),
        method: 'get',
        params: this.$http.adornParams({
          keyWord: this.staffNameOrId
        })
      }).then(({data}) => {
        if (data.code === 0) {
          this.personList = data.data
          this.staffList = []
          if (data.data.length === 0) {
            this.$message({
              message: '暂无搜索结果！',
              type: 'warning'
            })
          }
        }
      })
    },
    // 查询上一层
    searchBeforLive (id, index) {
      this.personList = []
      if (id) {
        this.fetchTwoSatfflist(id)
      } else {
        this.fetchStaffList()
      }
      this.headList.splice(index)
    },
    // 选择人
    handleCheckedCitiesChange (staffId, staffName, orgName, staffAccount, staffPosition, orgFullName) {
      let obj = {}
      let flag = 0
      this.upperStory.map(item => {
        if (item.staffId === staffId) {
          this.$message({
            message: '您已选择过该成员',
            type: 'warning'
          })
          flag = 1
          return false
        }
      })
      if (flag === 0) {
        obj.staffId = staffId
        obj.staffName = staffName
        obj.orgName = orgName
        obj.staffAccount = staffAccount
        obj.staffPosition = staffPosition
        obj.orgFullName = orgFullName
        this.upperStory.push(obj)
      }
    },
    // 点击刷新
    RefreshList () {
      this.fetchStaffList()
      this.personList = []
      this.headList = []
      this.staffNameOrId = ''
    },
    // 点击获取一级通讯录
    fetchStaffList () {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl(`organization/selectFirstList`),
        method: 'get',
        params: this.$http.adornParams({
        })
      }).then(({data}) => {
        if (data.code === 0) {
          this.staffList = data.list
          this.loading = false
        }
      })
    },
    // 点击获取二级通讯录
    fetchTwoSatfflist (orgId) {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl(`/organization/selectSonList`),
        method: 'get',
        params: this.$http.adornParams({
          orgId
        })
      }).then(({data}) => {
        console.log(data);
        if (data.code === 0) {
          this.staffList = data.organization
          this.personList = data.staff
          this.loading = false
        }
      })
    },
    // 确定
    submit () {
      this.dialogVisible = false
      if (this.sendName === '选择主数据人员') {
        this.$emit('fetchPersonId', this.upperStory)
      }
      if(this.sendName === '人员配置') {
        this.$emit('fetchGroupId', this.upperStory)
      }
      if (this.sendName === '字典管理') {
        this.$emit('fetchPersonId', this.upperStory)
      }
    }
  }
}
</script>

<style scoped>
.el-dialog__body{
  padding: 0 20px; 
}
.person_content{
  display: flex;
}
.el-tag{
  height: 30px;
}
.el-tag button{
  background: transparent;
  border: 0;
}
.group{
  width: 60%;
}
.group div{
  width: 100%;
  box-sizing: border-box;
}
.group div h3{
  width: 100%;
  text-align: center;
}
.staff_con{
  width: 100% !important;
  height: 486px;
  overflow-y: auto;
}
.group_con{
  width: 50%;
  height: 600px;
  padding: 10px;
  border: 1px solid #dedede;
}
.group_con ul,li{
  list-style: none;
  margin: 0;
  padding: 0;
}
.group_con li{
  cursor: pointer;
}
.group_con p:hover{
  background: #3E8EF7;
  color: #fff;
}
.personnel{
  margin: 0 20px;
  width: 40%;
}
.personnel h3{
  text-align: center;
}
.input{
  width: 83% !important;
}
.el-checkbox-group{
  padding-left: 40px !important;
}
.title{
  line-height: 40px;
  font-weight: bold;
  font-size: 20px;
  min-height: 0;
}
.searchInput{
  margin: 10px 0;
}
.title>span{
  cursor: pointer;
}
.title>span:last-child span{
  display: none;
}
.person_box{
   border: 1px solid #dedede;
   display: inline-block;
   width: 100%;
   height: 600px;
   overflow-y: auto;
   box-sizing: border-box;
   padding: 10px;
}
.person_box>span{
  margin: 2px 6px;
}
.group_li{
  padding: 0 !important;
  line-height: 30px;
  height: 546px;
  overflow-y: scroll;
}
.group_li li {
  padding-left: 40px !important;
}
.group_li li:hover {
  background: #3E8EF7;
  color: #fff;
}
.person_list li {
  line-height: 32px;
  padding-left: 40px;
}
.person_list li:hover{
  background: #3E8EF7;
  color: #fff;
}
.list_con{
  width: 100%;
}
</style>